<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSI餐厅小筑 外卖网</title>
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
    <link href="../assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
    <link rel="stylesheet" href="../assets/plugins/dropify/dist/css/dropify.min.css">
    <link href="../assets/plugins/morrisjs/morris.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- react -->
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../config.js"></script>
</head>


<body class="fix-header card-no-border logo-center">
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <div id="main-wrapper">
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <div class="navbar-collapse">
                    <div class="navbar-nav mr-auto mt-md-0">
                        <div class="nav-item"> <a class="navbar-brand" href="https://github.com/LimonSea/CSI-takeout-Course-design-project"><img
                                    src="../assets/images/logo.png" class="light-logo" alt="homepage" /></a> </div>
                    </div>
                    <ul class="navbar-nav my-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                                    src="../assets/images/users/7.jpg" alt="user" class="profile-pic" /></a>
                            <div class="dropdown-menu dropdown-menu-right scale-up">
                                <ul class="dropdown-user">
                                    <li>
                                        <div class="dw-user-box">
                                            <div class="u-img"><img src="../assets/images/users/7.jpg" alt="user"></div>
                                            <div class="u-text">
                                                <h4>admin</h4>
                                            </div>
                                        </div>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="mealtype.html"><i class="mdi mdi-book-open-variant"></i>菜系管理</a>
                                    </li>
                                    <li><a href="meal-list.html"><i class=" mdi mdi-clipboard-text"></i>菜品管理</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="admin-order-list.html"><i class="mdi mdi-cart-outline"></i> 订单管理</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="user-list.html"><i class="mdi mdi-account-star-variant"></i> 用户管理</a>
                                        <ul id>
                                            <li><a href="user-list.html">普通用户</a></li>
                                            <li><a href="admin-list.html">管理员</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="login.html"><i class="fa fa-power-off"></i>退出登录</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <aside class="left-sidebar">
            <div class="scroll-sidebar">
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li> <a class="has-arrow waves-effect waves-dark" href="mealtype.html"
                                aria-expanded="false"><i class="mdi mdi-book-open-variant"></i><span
                                    class="hide-menu">菜系管理</span></a>
                        </li>
                        <li class="three-column"> <a class="has-arrow waves-effect waves-dark" href="meal-list.html"
                                aria-expanded="false"><i class="mdi mdi-clipboard-text"></i><span
                                    class="hide-menu">菜品管理</span></a>
                        </li>
                        <li class="two-column"> <a class="has-arrow waves-effect waves-dark"
                                href="admin-order-list.html" aria-expanded="false"><i
                                    class="mdi mdi-cart-outline"></i><span class="hide-menu">订单管理</span></a>
                        </li>
                        <li class="nav-small-cap">FORMS, TABLE &amp; WIDGETS</li>
                        <li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="add-user.html"
                                aria-expanded="false"><i class="mdi mdi-account-star-variant"></i><span
                                    class="hide-menu">用户管理</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <ul>
                                    <li><a href="user-list.html">普通用户</a></li>
                                </ul>
                                <ul>
                                    <li><a href="admin-list.html">管理员</a></li>
                                </ul>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>
        <div class="page-wrapper">
            <div class="container-fluid">
                <div class="card">

                    <!-- 上传图片组件 -->
                    <div id="uploadFile"></div>
                </div>
            </div>
            <footer class="footer">
                © 2019 CSI餐厅小筑 外卖网
            </footer>
        </div>
    </div>
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="js/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="js/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Custom JavaScript -->
    <script src="js/custom.min.js"></script>
    <!-- ============================================================== -->
    <!-- Plugins for this page -->
    <!-- ============================================================== -->
    <!-- jQuery file upload -->
    <script src="../assets/plugins/dropify/dist/js/dropify.min.js"></script>
    <script>
        $(document).ready(function () {
            // Basic
            $('.dropify').dropify();

            // Translated
            $('.dropify-fr').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                    remove: 'Supprimer',
                    error: 'Désolé, le fichier trop volumineux'
                }
            });

            // Used events
            var drEvent = $('#input-file-events').dropify();

            drEvent.on('dropify.beforeClear', function (event, element) {
                return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
            });

            drEvent.on('dropify.afterClear', function (event, element) {
                alert('File deleted');
            });

            drEvent.on('dropify.errors', function (event, element) {
                console.log('Has Errors');
            });

            var drDestroy = $('#input-file-to-destroy').dropify();
            drDestroy = drDestroy.data('dropify')
            $('#toggleDropify').on('click', function (e) {
                e.preventDefault();
                if (drDestroy.isDropified()) {
                    drDestroy.destroy();
                } else {
                    drDestroy.init();
                }
            })
        });
    </script>
    <!-- ============================================================== -->
    <!-- Style switcher -->
    <!-- ============================================================== -->
    <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
    <script type="text/babel">
      class UploadFile extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            file: '',
            mealid: ''
          }
          this.handleFileChange = this.handleFileChange.bind(this)
          this.confirmUpload = this.confirmUpload.bind(this)
        }
        handleFileChange(event) {
          var that = this
          let file = event.target.files[0]
          console.log(file)
          const formData = new FormData()
          formData.append('file', file)   
          if (file) {
            $.ajax({
              type: 'POST',
              url: global.targetUrl + 'user/uploadfile',
              headers: {
                token: localStorage.token 
              },
              data: formData,
              processData:false,
              contentType: false,
              success: function (res) {
                console.log('返回的',res)
                if (res.resultMsg.code === 1000) {
                  // localStorage.setItem('userid',res.bean.user.userid)
                  // location.href = "menu.html"
                  that.setState({
                    mealphoto: res.bean
                  })
                }
              }
            })
          }
        }
        confirmUpload(event) {
          $.ajax({
            type: 'POST',
            url: global.targetUrl + 'manager/updatemealphoto',
            headers: {
              token: localStorage.token 
            },
            data: {
              mealid: this.state.mealid,
              mealphoto: this.state.mealphoto
            },
            success: function (res) {
              console.log('返回的',res)
              if (res.resultMsg.code === 1000) {
                alert('上传成功')
                // localStorage.setItem('userid',res.bean.user.userid)
                location.href = "meal-list.html"
              }
            }
          })
        }
        componentDidMount() {
          let that = this
          // 获取上个页面传递的参数
          let url = location.search
          let str, mealid
          if (url.indexOf('?') !== -1) {
            str = url.substr(1)
            mealid = str.split('=')[1]
          }
          console.log('mealid:',mealid)
          this.setState({
            mealid: mealid
          })
        }
        render() {
          return (
            <div className="card-body"> 
                <h4 className="card-title">上传图片</h4>
                <input type="file" id="input-file-now" className="dropify" onChange={this.handleFileChange}/>
                <div className="card-footer">
                    <button className="btn btn-success" style={{marginLeft: '20px'}} onClick={this.confirmUpload}>提交图片</button>
                    <a href='meal-list.html'><button className="btn btn-success" style={{marginLeft: '20px'}}>返回列表</button></a>
                </div>
            </div>
          )
        }
      }
      ReactDOM.render(
        <UploadFile />,
        document.getElementById('uploadFile')
      )
    </script>
</body>

</html>